<template>
  <el-dialog :title="this.dataForm.approvalStyle === undefined ? '新增' : '修改'" :close-on-click-modal="false"
    :visible.sync="visible">

    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
      label-width="80px">

      <el-form-item label="申请类型" prop="approvalStyle">
        <el-select v-model="dataForm.approvalStyle" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>

      <el-container>
        <el-aside width="130px" style="padding: 30px 0px 0px 20px;">
          <el-steps direction="vertical" :active="approvalLevel" space="100px">
            <el-step v-if="approvalLevel >= 1" title="初审角色" :icon="this.icons.firstIcon"></el-step>
            <el-step v-if="approvalLevel >= 2" title="二审角色" :icon="this.icons.secondIcon"></el-step>
            <el-step v-if="approvalLevel >= 3" title="三审角色" :icon="this.icons.thirdIcon"></el-step>
          </el-steps>
        </el-aside>

        <el-main>
          <el-form-item style="margin-top: 2px;" v-if="approvalLevel >= 1" prop="firstApproval" size="medium"
            label-width="5px">

            <el-popover ref="deptListPopover" placement="bottom-start" trigger="hover">
              <div v-if="!this.divVisible" @click="changeDept">&emsp;&emsp;本部门</div>
              <div v-if="this.divVisible" style="background-color: rgb(238, 248, 255);" @click="changeDept">
                &emsp;&emsp;本部门</div>
              <el-tree :data="deptList" :props="deptListTreeProps" node-key="id" ref="deptListTree"
                @current-change="firstDeptListTreeCurrentChangeHandle" :default-expand-all="true"
                :highlight-current="!this.divVisible" :expand-on-click-node="false">
              </el-tree>
              <el-input v-model="dataForm.firstApprovalDeptName" :readonly="true" placeholder="点击选择部门"
                style="width: 200px;" slot="reference" />
            </el-popover>
            <el-select v-model="dataForm.firstApprovalRoleId" @change="firstApprovalRoleChangeHandle"
              placeholder="请选择角色">
              <el-option v-for="role in roleList" :key="role.roleId" :label="role.roleName" :value="role.roleId">
              </el-option>
            </el-select>

            <el-button style="margin-left: 20px;" icon="el-icon-plus" type="success" size="mini"
              @click="firstApprovalLevelAdd()" round></el-button>
            <el-button icon="el-icon-minus" type="danger" size="mini" @click="firstApprovalLevelDelete()"
              round></el-button>
          </el-form-item>

          <el-form-item style="margin-top: 65px;" v-if="approvalLevel >= 2" prop="secondApproval" size="medium"
            label-width="5px">
            <el-popover ref="deptListPopover" placement="bottom-start" trigger="hover">
              <el-tree :data="deptList" :props="deptListTreeProps" node-key="id" ref="deptListTree"
                @current-change="secondDeptListTreeCurrentChangeHandle" :default-expand-all="true"
                :highlight-current="true" :expand-on-click-node="false">
              </el-tree>
              <el-input v-model="dataForm.secondApprovalDeptName" :readonly="true" placeholder="点击选择部门"
                style="width: 200px;" slot="reference" />
            </el-popover>

            <el-select v-model="dataForm.secondApprovalRoleId" @change="secondApprovalRoleChangeHandle"
              placeholder="请选择角色">
              <el-option v-for="role in roleList" :key="role.roleId" :label="role.roleName" :value="role.roleId">
              </el-option>
            </el-select>

            <el-button style="margin-left: 20px;" icon="el-icon-plus" type="success" size="mini"
              @click="secondApprovalLevelAdd()" round></el-button>
            <el-button icon="el-icon-minus" type="danger" size="mini" @click="secondApprovalLevelDelete()"
              round></el-button>
          </el-form-item>

          <el-form-item style="margin-top: 65px;" v-if="approvalLevel >= 3" prop="thirdApproval" size="medium"
            label-width="5px">

            <el-popover ref="deptListPopover" placement="bottom-start" trigger="hover">
              <el-tree :data="deptList" :props="deptListTreeProps" node-key="id" ref="deptListTree"
                @current-change="thirdDeptListTreeCurrentChangeHandle" :default-expand-all="true"
                :highlight-current="true" :expand-on-click-node="false">
              </el-tree>
              <el-input v-model="dataForm.thirdApprovalDeptName" :readonly="true" placeholder="点击选择部门"
                style="width: 200px;" slot="reference" />
            </el-popover>


            <el-select v-model="dataForm.thirdApprovalRoleId" @change="thirdApprovalRoleChangeHandle"
              placeholder="请选择角色">
              <el-option v-for="role in roleList" :key="role.roleId" :label="role.roleName" :value="role.roleId">
              </el-option>
            </el-select>

            <el-button icon="el-icon-minus" type="danger" size="mini" @click="thirdApprovalLevelDelete()"
              round></el-button>
          </el-form-item>
        </el-main>
      </el-container>

    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>

  </el-dialog>
</template>

<script>
  import { treeDataTranslate } from '@/utils'
  export default {
    data() {
      var validateFirstApproval = (rule, value, callback) => {
        if (this.approvalLevel >= 1 && this.dataForm.firstApprovalDeptId === undefined) {
          callback(new Error('请选择初审部门'))
        } else if (this.approvalLevel >= 1 && this.dataForm.firstApprovalRoleId === undefined) {
          callback(new Error('请选择初审角色'))
        } else {
          callback()
        }
      }
      var validateSecondApproval = (rule, value, callback) => {
        if (this.approvalLevel >= 2 && this.dataForm.secondApprovalDeptId === undefined) {
          callback(new Error('请选择二审部门'))
        } else if (this.approvalLevel >= 2 && this.dataForm.secondApprovalRoleId === undefined) {
          callback(new Error('请选择二审角色'))
        } else {
          callback()
        }
      }
      var validateThirdApproval = (rule, value, callback) => {
        if (this.approvalLevel >= 3 && this.dataForm.thirdApprovalDeptId === undefined) {
          callback(new Error('请选择三审部门'))
        } else if (this.approvalLevel >= 3 && this.dataForm.thirdApprovalRoleId === undefined) {
          callback(new Error('请选择三审角色'))
        } else {
          callback()
        }
      }
      return {
        visible: false,
        divVisible: false,
        approvalLevel: 1,
        dataForm: {
          id: 0,
          approvalStyle: 0,
          firstApprovalDeptId: undefined,
          firstApprovalDeptName: undefined,
          firstApprovalRoleId: undefined,
          secondApprovalDeptId: undefined,
          secondApprovalDeptName: undefined,
          secondApprovalRoleId: undefined,
          thirdApprovalDeptId: undefined,
          thirdApprovalDeptName: undefined,
          thirdApprovalRoleId: undefined
        },
        deptListTreeProps: {
          label: 'name',
          children: 'children'
        },
        roleList: [],
        firstDeptDataList: [],
        deptList: [],
        deptDataForm: {
          approvalStyle: undefined
        },
        process_approval_list: [],
        icons: {
          firstIcon: 'el-icon-time',
          secondIcon: 'el-icon-time',
          thirdIcon: 'el-icon-time'
        },
        dataRule: {
          approvalStyle: [
            { required: true, message: '申请类型不能为空', trigger: ['change', 'blur'] }
          ],
          firstApproval: [
            { required: true, validator: validateFirstApproval, trigger: ['change', 'blur'] }
          ],
          secondApproval: [
            { required: true, validator: validateSecondApproval, trigger: ['change', 'blur'] }
          ],
          thirdApproval: [
            { required: true, validator: validateThirdApproval, trigger: ['change', 'blur'] }
          ]
        },
        options: [{
          value: 0,
          label: '离职申请流程'
        }, {
          value: 1,
          label: '权限、账号申请流程'
        }, {
          value: 2,
          label: '采购申请流程'
        }, {
          value: 3,
          label: '物资申请流程'
        }, {
          value: 4,
          label: '维修申请流程'
        }, {
          value: 5,
          label: '请假申请流程'
        }]
      }
    },
    created() {

    },
    methods: {
      init(approvalStyle) {
        this.reset()
        this.dataForm.approvalStyle = approvalStyle
        this.approvalLevel = 1
        this.$http({
          url: this.$http.adornUrl('/sys/role/select'),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({ data }) => {
          this.roleList = data && data.code === 0 ? data.list : []
        })

        this.$http({
          url: this.$http.adornUrl('/sys/dept/list'),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({ data }) => {
          this.deptList = treeDataTranslate(data.data, 'id')
        })

        // 修改的时候回填
        if (this.dataForm.approvalStyle !== undefined) {
          this.$http({
            url: this.$http.adornUrl('/sys/process/approval/list'),
            method: 'post',
            data: this.dataForm.approvalStyle
          }).then(({ data }) => {
            var result = data[0]
            if (result.processApprovalList.length === 1) {
              this.approvalLevel = 1
              // this.dataForm.approvalStyle = result.approvalStyle
              this.dataForm.firstApprovalDeptId = result.processApprovalList[0].approvalDeptId
              this.dataForm.firstApprovalDeptName = result.processApprovalList[0].approvalDeptStr
              this.dataForm.firstApprovalRoleId = result.processApprovalList[0].approvalRoleId
              this.icons.firstIcon = 'el-icon-circle-check'
            } else if (result.processApprovalList.length === 2) {
              this.approvalLevel = 2
              // this.dataForm.approvalStyle = result.approvalStyle
              this.dataForm.firstApprovalDeptId = result.processApprovalList[0].approvalDeptId
              this.dataForm.firstApprovalDeptName = result.processApprovalList[0].approvalDeptStr
              this.dataForm.firstApprovalRoleId = result.processApprovalList[0].approvalRoleId
              this.dataForm.secondApprovalDeptId = result.processApprovalList[1].approvalDeptId
              this.dataForm.secondApprovalDeptName = result.processApprovalList[1].approvalDeptStr
              this.dataForm.secondApprovalRoleId = result.processApprovalList[1].approvalRoleId
              this.icons.firstIcon = 'el-icon-circle-check'
              this.icons.secondIcon = 'el-icon-circle-check'
            } else if (result.processApprovalList.length === 3) {
              this.approvalLevel = 3
              // this.dataForm.approvalStyle = result.approvalStyle
              this.dataForm.firstApprovalDeptId = result.processApprovalList[0].approvalDeptId
              this.dataForm.firstApprovalDeptName = result.processApprovalList[0].approvalDeptStr
              this.dataForm.firstApprovalRoleId = result.processApprovalList[0].approvalRoleId
              this.dataForm.secondApprovalDeptId = result.processApprovalList[1].approvalDeptId
              this.dataForm.secondApprovalDeptName = result.processApprovalList[1].approvalDeptStr
              this.dataForm.secondApprovalRoleId = result.processApprovalList[1].approvalRoleId
              this.dataForm.thirdApprovalDeptId = result.processApprovalList[2].approvalDeptId
              this.dataForm.thirdApprovalDeptName = result.processApprovalList[2].approvalDeptStr
              this.dataForm.thirdApprovalRoleId = result.processApprovalList[2].approvalRoleId
              this.icons.firstIcon = 'el-icon-circle-check'
              this.icons.secondIcon = 'el-icon-circle-check'
              this.icons.thirdIcon = 'el-icon-circle-check'
            }
            if (this.dataForm.firstApprovalDeptId === '0') {
              this.divVisible = true
            } else {
              this.divVisible = false
            }
          })
        }
        this.visible = true
      },
      // 清空dataForm
      reset() {
        this.dataForm.id = 0
        this.dataForm.approvalStyle = undefined
        this.dataForm.firstApprovalDeptId = undefined
        this.dataForm.firstApprovalDeptName = undefined
        this.dataForm.firstApprovalRoleId = undefined
        this.dataForm.secondApprovalDeptId = undefined
        this.dataForm.secondApprovalDeptName = undefined
        this.dataForm.secondApprovalRoleId = undefined
        this.dataForm.thirdApprovalDeptId = undefined
        this.dataForm.thirdApprovalDeptName = undefined
        this.dataForm.thirdApprovalRoleId = undefined
        this.icons.firstIcon = 'el-icon-time'
        this.icons.secondIcon = 'el-icon-time'
        this.icons.thirdIcon = 'el-icon-time'
        this.divVisible = false
      },
      changeDept() {
        this.divVisible = true
        this.dataForm.firstApprovalDeptId = 0
        this.dataForm.firstApprovalDeptName = '本部门'
        if (this.dataForm.firstApprovalDeptId !== undefined && this.dataForm.firstApprovalRoleId !== undefined) {
          this.icons.firstIcon = 'el-icon-circle-check'
        }
      },
      // 菜单树选中
      firstDeptListTreeCurrentChangeHandle(data, node) {
        this.divVisible = false
        this.dataForm.firstApprovalDeptId = data.id
        this.dataForm.firstApprovalDeptName = data.name
        if (this.dataForm.firstApprovalDeptId !== undefined && this.dataForm.firstApprovalRoleId !== undefined) {
          this.icons.firstIcon = 'el-icon-circle-check'
        }
      },
      firstApprovalRoleChangeHandle() {
        if (this.dataForm.firstApprovalDeptId !== undefined && this.dataForm.firstApprovalRoleId !== undefined) {
          this.icons.firstIcon = 'el-icon-circle-check'
        }
      },
      // 菜单树选中
      secondDeptListTreeCurrentChangeHandle(data, node) {
        this.dataForm.secondApprovalDeptId = data.id
        this.dataForm.secondApprovalDeptName = data.name
        if (this.dataForm.secondApprovalDeptId !== undefined && this.dataForm.secondApprovalRoleId !== undefined) {
          this.icons.secondIcon = 'el-icon-circle-check'
        }
      },
      secondApprovalRoleChangeHandle() {
        if (this.dataForm.secondApprovalDeptId !== undefined && this.dataForm.secondApprovalRoleId !== undefined) {
          this.icons.secondIcon = 'el-icon-circle-check'
        }
      },
      // 菜单树选中
      thirdDeptListTreeCurrentChangeHandle(data, node) {
        this.dataForm.thirdApprovalDeptId = data.id
        this.dataForm.thirdApprovalDeptName = data.name
      },
      thirdApprovalRoleChangeHandle() {
        if (this.dataForm.thirdApprovalDeptId !== undefined && this.dataForm.thirdApprovalRoleId !== undefined) {
          this.icons.thirdIcon = 'el-icon-circle-check'
        }
      },
      // 图标选中
      iconActiveHandle(iconName) {
        this.dataForm.icon = iconName
      },
      firstApprovalLevelAdd() {
        if (this.approvalLevel === 1) {
          this.approvalLevel++
        }
      },
      firstApprovalLevelDelete() {
        this.dataForm.firstApprovalDeptId = undefined
        this.dataForm.firstApprovalDeptName = undefined
        this.dataForm.firstApprovalRoleId = undefined
        this.icons.firstIcon = 'el-icon-time'
      },
      secondApprovalLevelAdd() {
        if (this.approvalLevel === 2) {
          this.approvalLevel++
        }
      },
      secondApprovalLevelDelete() {
        if (this.approvalLevel === 2) {
          this.approvalLevel--
        }
        this.dataForm.secondApprovalDeptId = undefined
        this.dataForm.secondApprovalDeptName = undefined
        this.dataForm.secondApprovalRoleId = undefined
        this.icons.secondIcon = 'el-icon-time'
      },
      thirdApprovalLevelDelete() {
        if (this.approvalLevel === 3) {
          this.approvalLevel--
        }
        this.dataForm.thirdApprovalDeptId = undefined
        this.dataForm.thirdApprovalDeptName = undefined
        this.dataForm.thirdApprovalRoleId = undefined
        this.icons.thirdIcon = 'el-icon-time'
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            if (this.approvalLevel === 1) {
              this.process_approval_list = [
                { 'approvalStyle': this.dataForm.approvalStyle, 'approvalDeptId': this.dataForm.firstApprovalDeptId, 'approvalRoleId': this.dataForm.firstApprovalRoleId }
              ]
            }
            if (this.approvalLevel === 2) {
              this.process_approval_list = [
                { 'approvalStyle': this.dataForm.approvalStyle, 'approvalDeptId': this.dataForm.firstApprovalDeptId, 'approvalRoleId': this.dataForm.firstApprovalRoleId },
                { 'approvalStyle': this.dataForm.approvalStyle, 'approvalDeptId': this.dataForm.secondApprovalDeptId, 'approvalRoleId': this.dataForm.secondApprovalRoleId }
              ]
            }
            if (this.approvalLevel === 3) {
              this.process_approval_list = [
                { 'approvalStyle': this.dataForm.approvalStyle, 'approvalDeptId': this.dataForm.firstApprovalDeptId, 'approvalRoleId': this.dataForm.firstApprovalRoleId },
                { 'approvalStyle': this.dataForm.approvalStyle, 'approvalDeptId': this.dataForm.secondApprovalDeptId, 'approvalRoleId': this.dataForm.secondApprovalRoleId },
                { 'approvalStyle': this.dataForm.approvalStyle, 'approvalDeptId': this.dataForm.thirdApprovalDeptId, 'approvalRoleId': this.dataForm.thirdApprovalRoleId }
              ]
            }
            this.$http({
              url: this.$http.adornUrl(`/sys/process/approval/${this.dataForm.approvalStyle === undefined ? 'save' : 'update'}`),
              method: 'post',
              data: this.process_approval_list
            }).then(({ data }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .el-aside::-webkit-scrollbar {
    display: none;
  }
</style>